<template>
  <div class="show-books-block">
    <!-- 标题 -->
    <show-books-title :icon="iconType">
      {{ blockTitle }}
    </show-books-title>
    <div 
        class="show-books-item" 
        v-for="item in booksData" 
        :key="item.id">
        <div
            class="show-books-item-1"
            v-if='item.type == 1'
            @click="gotoBookDetail(item.id,item.bookName)">
            <div class="photo"><img :src="item.imgUrl" alt="" /></div>
            <div class="book-info">
            <div class="book-name">{{ item.bookName }}</div>
            <div class="book-scripe">{{ item.bookScripe }}</div>
            <div class="book-msg">
                <div class="author">
                    <span class="fa fa-user-circle"></span> {{ item.author }}
                </div>
                <div class="tag">{{ item.tag1 }}</div>
                <div class="tag">{{ item.tag2 }}</div>
            </div>
            </div>
        </div>
        <div 
            class="show-books-item-2"
            v-if='item.type == 2'>
            <ul>
                <li 
                    v-for='item_iName in item.imgAndName'
                    :key = 'item_iName.id'
                    @click="gotoBookDetail(item_iName.id,item_iName.bookName)">
                    <div class="book-img-name">
                        <div class="photo"><img :src="item_iName.imgUrl" alt=""></div>
                        <div class="title">{{item_iName.bookName}}</div>
                    </div>

                </li>
            </ul>
        </div>
        <div
            class="show-books-item-3"
            v-if='item.type == 3'>
            <ul>
                <li
                    v-for='item_tName in item.typeAndName'
                    :key = "item_tName.id"
                    @click="gotoBookDetail(item_tName.id,item_tName.bookName)">
                    <div>
                        [{{item_tName.bookType}}]{{item_tName.bookName}}
                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
                    </div>
                </li>
            </ul>
        </div>
    </div>
  </div>
</template>

<script>
import mynav from "./mynav.vue";
import showBooksTitle from "@/components/showBooksTitle.vue";
export default {
  name: "showBooksItem",
  components: {
    showBooksTitle,
    mynav,
  },
  props: {
    booksBlock: Array,
    blockTitle: String,
    iconType: Number,
  },
  data() {
    // console.log(this.booksBlock.slice(0));
    return {
      booksData: JSON.parse(JSON.stringify(this.booksBlock)),
    };
  },
  methods: {
    gotoBookDetail(book_id, book_name) {
        // console.log('go to book detail');
        this.$router.push({
          path:'/book_detail',
          query:{bookId:book_id,bookName: book_name}
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.show-books-block {
  border-bottom: 20px solid #eee;
}
.show-books-item-1 {
  display: flex;
  min-height: 90px;
  color: #888888;
  margin: 20px 15px 0px 15px;
  padding-bottom: 20px;
  position: relative;
  &::after {
    content: "";
    display: block;
    position: absolute;
    width: 80%;
    bottom: -1px;
    left: 10%;
    height: 1px;
    background-color: #eee;
  }
  .photo {
    flex-basis: 68px;
    width: 68px;
    height: 90px;
    flex-shrink: 0;
    border: 1px solid #ccc;
    margin-right: 15px;
    padding: 1px;
    box-sizing: border-box;
    img {
      width: 64px;
      height: 86px;
    }
  }
  .book-info {
    flex-grow: 1;
    font-size: 13px;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    .book-name {
      font-size: 16.5px;
      color: black;
      width: 100%;
    }
    .book-scripe {
      display: -webkit-box; /*对象作为伸缩盒子模型展示*/
      -webkit-box-orient: vertical; /*设置或检索伸缩盒子对象的子元素的排列方式*/
      -webkit-line-clamp: 2; /*显示的行数*/
      overflow: hidden; /*隐藏超出的*/
    }
    .book-msg {
      display: flex;
      width: 100%;
    }
    .author {
      flex-grow: 1;
    }
    .tag {
      background-color: #d1acd8;
      color: white;
      padding-left: 5px;
      padding-right: 5px;
      border-radius: 3px;
      margin-right: 5px;
      flex-grow: 0;
    }
    .tag:last-child {
      background-color: #a1d0d2;
    }
  }
}
.show-books-item-2 {
    padding: 15px 15px 0px 15px;
    ul {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        li {
            width: 33.3333%;
            font-size: 12px;
            margin-bottom: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            .book-img-name {
                flex-basis: 82px;
            }
            .photo {
                height: 108px;
                width: 82px;
                padding: 1px;
                border: 1px solid #ccc;
                box-sizing: border-box;
                margin-bottom: 10px;
                img {
                    height: 104px;
                    width: 78px;
                }
            }
            .title {
                width: 82px;
            }
        }
    }

}
.show-books-item-3 {
    div {
        padding: 15px;
        position: relative;
        font-size: 16px;
        i {
            color: #ccc;
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
        }
        &::after {
            content: "";
            display: block;
            position: absolute;
            width: 80%;
            bottom: -1px;
            left: 10%;
            height: 1px;
            background-color: #eee;
        }
    }
}
</style>